<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{title}}</block>
		</cu-custom>
	
		
		<scroll-view class="cu-chat main-chat" scroll-y :style="'bottom:'+(InputBottom+60)+'px ;'"
			@touchstart="packUpKeyboard" :scroll-into-view="scrollInto">

			<view v-for="(item,index) in chatList" :id="'s'+index">
			
				<!-- 我方消息-->
				<view class="cu-item self" 
					v-if="jimUserInfo.username == item.content.from_id">
					<view class="main">
						<view class="content bg-pink shadow" v-if="(item.content.msg_type == 'image')">
							<image v-if="item.content.msg_body.type" :src="item.content.msg_body.image" class="radius"
								mode="widthFix" @click="openimage(item.content.msg_body.image)">
							</image>
							<image v-else :src="jimLocalhost + item.content.msg_body.media_id" class="radius"
								mode="widthFix" @click="openimage(jimLocalhost + item.content.msg_body.media_id)">
							</image>
						</view>
						<view class="content bg-pink shadow" v-else v-html="renderTextMessage(item)"></view>
					</view>
					<view class="cu-avatar radius" :style="[{background: 'url('+jimUserInfoAvatar+')'}]"
						@click="clickUser(item)"></view>
				</view>

				<!-- 对方消息-->
				<view class="cu-item" 
					v-else-if="jimUserInfo.username !== item.content.from_id">
					<view class="cu-avatar radius" :style="[{background: 'url('+singleInfoAvatar+')'}]"></view>
					<view class="main">
						<view class="content shadow" v-if="(item.content.msg_type == 'image')">
							<image v-if="item.content.msg_body.type" :src="item.content.msg_body.image" class="radius"
								mode="widthFix" @click="openimage(item.content.msg_body.image)">
							</image>
							<image v-else :src="jimLocalhost + item.content.msg_body.media_id" class="radius"
								mode="widthFix">
							</image>

							<!-- <image :src="jimLocalhost + item.content.msg_body.media_id" class="radius" mode="widthFix" @click="openimage(jimLocalhost + item.content.msg_body.media_id)"></image> -->
						</view>
						<view class="content shadow" v-else v-html="renderTextMessage(item)">
							<!-- <text>{{item.text}}</text> -->
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="cu-bar foot input" :style="[{bottom:InputBottom+'px'}]">
			<input class="solid-bottom" :adjust-position="false" :focus="false" maxlength="300" cursor-spacing="10"
				@focus="InputFocus" @blur="InputBlur" v-model="my_say_text" ref="inputBox" @click="InputFocus"></input>
			<view class="action">
				<text class="cuIcon-emoji text-grey" @click="showEmoji()"></text>
			</view>
			<button class="cu-btn bg-green shadow" @click="to_send()">发送</button>
		</view>

		<!-- 显示表情勒边 -->
		<view class="action-bottom" v-if="emoji.show">
			<image class="emoji-item " v-for="(emojiItem, emojiKey, index) in emoji.map" :key="index"
				:src="emoji.url + emojiItem" @click="selectEmoji(emojiKey)"></image>
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex';
	import EmojiDecoder from "@/components/EmojiDecoder.js";
	const ddd = 'https://imgcache.qq.com/open/qcloud/tim/assets/emoji/emoji_3@2x.png'
	
	import jpushIM from '@/js_sdk/jim.js'
	
	export default {
		data() {
			// 定义表情
			let emojiUrl = 'https://imgcache.qq.com/open/qcloud/tim/assets/emoji/';
			let emojiMap = {
				'[NO]': 'emoji_0@2x.png',
			};
			return {
				// scroll-into-view的值
				scrollInto: "",
				MikeBox: [],
				InputBottom: 0,
				chater_info: {},
				title: "聊天",
				// chatList:[],
				username: "",
				userinfo: {},
				my_say_text: '',
				show: false,
				showGuanzhu: false,
				emoji: {
					url: emojiUrl,
					map: emojiMap,
					show: false,
					decoder: new EmojiDecoder(emojiUrl, emojiMap)
				},
				modal: false,

				chatScrollTop: 9999999,
			};
		},
		computed: {
			
			hasLogin() {
				return this.$store.getters.hasLogin;
			},
			syncConversation() {
				return this.$store.getters.syncConversation;
			},
			conversation() {
				return this.$store.getters.conversation;
			},
			chatList() {
				return this.$store.getters.chatList;
			},
			singleInfo() {
				return this.$store.getters.singleInfo;
			},
			jimUserInfo() {
				return this.$store.getters.jimUserInfo;
			},
			jimLocalhost() {
				return 'https://fmedia.im.jiguang.cn/'
			},
			singleInfoAvatar() {
				return this.singleInfo.avatar ?
					'https://fmedia.im.jiguang.cn/' + this.singleInfo.avatar :
					this.jimUserInfo.gender === 2 ? '../../static/editdata/woman.png' : '../../static/editdata/man.png';
			},
			jimUserInfoAvatar() {

				return this.jimUserInfo.avatar ?
					'https://fmedia.im.jiguang.cn/' + this.jimUserInfo.avatar :
					this.jimUserInfo.gender === 2 ? '../../static/editdata/woman.png' : '../../static/editdata/man.png';
			},
		},
		onUnload() {
			this.$store.dispatch('jimGetConversation')
		},
		onLoad(e) {
			
			if(!jpushIM.isInit()) {
				this.$store.dispatch('jimInit')
			}
			if(!jpushIM.isLogin()) {
				let data = uni.getStorageSync('jimLoginInfo');
				this.$store.dispatch('jimLogin', data);
				setTimeout(()=> {
					this.$store.dispatch('jimGetSingleInfo', e.username);
					console.log('jimGetSingleInfo')
				}, 1000)
			}
			
			
			if (this.hasLogin) {
				this.$store.dispatch('jimGetSingleInfo', e.username);
			}

			// 监听键盘高度
			uni.onKeyboardHeightChange(res => {
				// 如果表情包打开 直接return
				if (this.emoji.show) {
					return
				}
				// res.height 为键盘高度
				// 距离底部
				this.InputBottom = res.height
				this.$nextTick(() => {
					// 页面滚动到底部
					this.scrollBottom()
				})
			})
		},
		watch: {
			hasLogin(n) {
				if (n) {
					this.$store.dispatch('jimGetSingleInfo', this.thouUsername)
				}
			},
			singleInfo(n) {
				if (n.nickname || n.username) {
					this.title = n.nickname || n.username
				}
			},
			// 聊天数据
			chatList(news, old) {
				this.$nextTick(() => {
					this.scrollBottom()
				})
			}
		},
		methods: {

			// 滚动到底部
			scrollBottom() {
				this.scrollInto = ''
				this.$nextTick(() => {
					this.scrollInto = 's' + (this.chatList.length - 1);
				})
			},
			// 收起键盘
			packUpKeyboard() {
				uni.hideKeyboard();
				this.InputBottom = 0
				this.emoji.show = false
			},
		
			setChatScrollTop() {
				setTimeout(() => {
					this.chatScrollTop += 1;
				}, 200)
			},

			to_send() {
				let params = {
					content: this.my_say_text,
					appkey: this.singleInfo.appkey,
					target_username: this.singleInfo.username,
					target_nickname: this.singleInfo.nickname
				}
				this.$store.dispatch('jimSendSingleMsg', params);
	
				this.my_say_text = '';
			},


			InputFocus(e) {
				// this.InputBottom = e.detail.height
				this.emoji.show = false;
			},
			InputBlur(e) {
				this.InputBottom = 0
			},
			// 更多
			showMore() {
				this.show = true
			},
		
			// 显示表情
			showEmoji() {
				this.emoji.show = !this.emoji.show;
				this.$nextTick(() => {
					this.scrollBottom()
				})
				if (this.emoji.show) {
					this.InputBottom = 200
				} else {
					this.InputBottom = 0
				}


			},
			selectEmoji(emojiKey) {
				this.my_say_text += emojiKey
			},
			// 渲染显示文本信息 包含信息
			renderTextMessage(message) {
				return '<text class="htmlemoji">' + this.emoji.decoder.decode(message.content.msg_body.text) + '</text>'
			},
		}
	}
</script>

<style scoped lang="scss">
	* {
		word-break: break-all;
	}

	page {
		padding-bottom: 100upx;
	}

	.bg-pink {
		background-color: #FACBFF;
		color: #333333;
	}

	.cu-avatar {
		background-size: 100% 100% !important;
		background-color: #EEE !important;
	}

	.dropdown {
		min-width: 100px;
		background-color: #FFFFFF;
		position: absolute;
		right: 0;
		padding: 0 12px;
		text-align: center;

		&::after {
			position: absolute;
			content: '';
			border-right: 10px solid transparent;
			border-left: 10px solid transparent;
			border-bottom: 10px solid #FFFFFF;
			top: -10px;
			right: 16px;

		}
	}

	.border-radius-custom {
		border-radius: 5px;
	}

	.margin-sm-t {
		margin-top: 8px;
	}

	.guanzhu {
		display: flex;
		position: fixed;
		width: calc(100% - 32px);
		z-index: 999;
		justify-content: space-between;
		align-items: center;
	}

	.main-chat {
		position: absolute;
		left: 0;
		top: 100px;
		bottom: 60px;
		width: 100%;
		// overflow-y: auto;
		// margin-bottom: 60px;
		// margin-top: 26px;
		// background-color: yellow;
	}

	.tips {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #E6E2E2;
		position: fixed;
		z-index: 999;
		width: 100%;
		padding: 5px 0;

		text {
			font-size: 10px;
			font-family: PingFang SC;

			:nth(1) {
				font-weight: 500;
				line-height: 16px;
				color: #999999;
			}

			:nth(2) {
				font-weight: bold;
				line-height: 16px;
				font-size: 14px;
				color: #666666;
			}
		}
	}

	.bg-btn-pick {
		background: linear-gradient(270deg, #C529DA 0%, #FA81CE 100%);
	}

	.color-100 {
		color: #FFFFFF;
	}

	.action-bottom {
		height: 200px;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		position: fixed;
		bottom: 0;
		z-index: 999;
		background: #FFFFFF;
		overflow: auto;
		padding-bottom: 20px;
		flex-wrap: wrap;
		justify-content: center;
	}

	.emoji-item {
		height: 24px;
		width: 24px;
		margin: 12px;
	}

	.phone-wrap {
		width: 60px;
		height: 20px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #E6E6E6;
		border-radius: 10px;
		margin-left: 13px;
		position: fixed;
	}

	.phone-size {
		font-size: 10px;
		font-family: PingFang SC;
		font-weight: 500;
	}

	.phone {
		width: 12px;
		height: 12px;
	}

	.system-wrap {
		width: 100%;
		display: flex;
	}
</style>
